<template>
  <div class="table-box">
    <ProTable ref="pTable" :columns="columns" :init-param="initParam" :request-api="getTableList">
      <template #jobInfo="scope">
        <div class="job-box">
          <div class="job-title-box">
            <el-space alignment="start" style="width: 100%" :spacer="spacer">
              <span class="job-title">{{ scope.row.title }}</span>
              <el-tooltip effect="dark" content="企业项目标记" placement="top-start">
                <el-button :type="scope.row.flagCompany === 'Y' ? 'primary' : 'info'" :icon="House" circle text size="small" />
              </el-tooltip>
            </el-space>
          </div>
          <div class="job-address-box mtd-5">
            <el-space alignment="start" style="width: 100%" :spacer="spacer">
              <span class="job-info">{{ scope.row.cityName }}</span>
              <span class="job-info">{{ scope.row.areaName }}</span>
            </el-space>
          </div>
          <div class="job-price-box">
            <el-space alignment="start" style="width: 100%" :spacer="spacer">
              <span class="job-price">{{ scope.row.priceAmt || "--" }}</span>
              <el-tooltip effect="dark" content="可议价" placement="top-start" v-if="scope.row.flagTalk === 'Y'">
                <el-button type="primary" :icon="Cherry" circle text size="small" />
              </el-tooltip>
            </el-space>
          </div>
        </div>
      </template>
      <template #jobAmt="scope">
        <div class="price-box">
          <div class="price-info">
            <span class="deal-price-info">{{ scope.row.settles[0]?.dealAmt || "--" }}</span>
          </div>
        </div>
      </template>
      <template #jobDate="scope">
        <div class="job-date-box">
          <div class="date-box">
            <span class="job-info">审核:</span><span class="job-data">{{ scope.row.auditDate }}</span>
          </div>
          <div class="date-box">
            <span class="job-info">开工:</span><span class="job-data">{{ scope.row.payDate }}</span>
          </div>
          <div class="date-box">
            <span class="job-info">完工:</span><span class="job-data">{{ scope.row.doneDate }}</span>
          </div>
        </div>
      </template>
      <template #jobPub="scope">
        <div class="pub-box">
          <div class="user-box">
            <div class="user-img-box">
              <img :src="getAvatorUrl(scope.row.userAvator)" alt="用户头像" />
            </div>
            <div class="user-info"><span class="job-info">{{ scope.row.userName }}</span></div>
          </div>
          <div class="comment-box">
            <div class="range-info"><el-rate v-model="scope.row.pubScore" :colors="colors" /></div>
            <div class="content-info"><span class="job-info">{{ scope.row.scoreContent }}</span></div>
            <div class="date-info"><span class="job-info">{{ scope.row.scoreDate }}</span></div>
          </div>
        </div>
      </template>
      <template #jobDealer="scope">
        <div class="dealer-box" v-if="scope.row.settles">
          <div class="user-box">
            <div class="user-img-box">
              <img :src="getAvatorUrl(scope.row.settles[0]?.applyUserAvator)" alt="用户头像" />
            </div>
            <div class="user-info"><span class="job-info">{{ scope.row.settles[0]?.applyUserName || "" }}</span></div>
          </div>
          <div class="comment-box">
            <div class="range-info"><el-rate v-model="scope.row.settles[0].dealScore" :colors="colors" /></div>
            <div class="content-info"><span class="job-info">{{ scope.row.settles[0]?.dealContent || "" }}</span></div>
            <div class="date-info"><span class="job-info">{{ scope.row.settles[0]?.scoreDate || "" }}</span></div>
          </div>
        </div>
      </template>
      <template #operation="scope">
        <el-button type="primary" :icon="Edit" size="small" text @click="handleOpenDialog(OptEnum.EDIT, scope.row)">
          查看岗位信息
        </el-button>
      </template>
    </ProTable>
    <JobDialog ref="dialogRef" @refresh-list="handleRefreshList" />
  </div>
</template>
<script setup lang="ts">
import { h, ref, reactive } from "vue";
import ProTable from "@/components/ProTable/index.vue";
import { Edit, House, Cherry } from "@element-plus/icons-vue";
import { getCommentFlexjobsVoListApi } from "@/api/modules/cpyjob/flexjob";
import { ColumnProps } from "@/components/ProTable/interface";
import { OptEnum } from "@/biz/eenum/appEnum";
// import { filterEnum } from "@/utils";
// import { flexJobStatusType } from "@/biz/datas/jobData";
import JobDialog from "../comm/job/JobDialog.vue";
// import { useHandleData } from "@/hooks/useHandleData";
import { ElDivider } from "element-plus";
import defaultAvatar from "@/assets/images/davator.png";

const pTable = ref();
// 固定在列表中的参数
const initParam = reactive({});
const spacer = h(ElDivider, { direction: "vertical" });
const colors = ref(['#99A9BF', '#F7BA2A', '#FF9900']);

// 默认不做操作就直接在 ProTable 组件上绑定	:requestApi="getUserList"
const getTableList = (params: any) => {
  // 这边可以处理一下参数
  // let newParams = JSON.parse(JSON.stringify(params));
  // newParams.createDate && (newParams.startDate = newParams.createDate[0]);
  // newParams.createDate && (newParams.endDate = newParams.createDate[1]);
  // delete newParams.createDate;
  return getCommentFlexjobsVoListApi(params) || [];
};
// 表格列配置
const columns: Partial<ColumnProps>[] = [
  { type: "selection", width: 60, fixed: "left" },
  //   { type: "index", label: "#", width: 60 },
  {
    prop: "jobInfo",
    label: "岗位信息",
    search: { el: "input" }
  },
  {
    prop: "jobAmt",
    label: "岗位费用",
    width: 140
  },
  {
    prop: "jobDate",
    label: "岗位时间",
    width: 200
  },
  {
    prop: "jobPub",
    label: "发岗人"
  },
  {
    prop: "jobDealer",
    label: "接单人"
  },
  {
    prop: "operation",
    width: 160,
    fixed: "right",
    label: "操作"
  }
];

//刷新数据列表
const handleRefreshList = () => {
  pTable.value.getTableList();
};

const getAvatorUrl = (aurl: string) => {
  let url = defaultAvatar;
  if (aurl) {
    url = aurl;
  }
  return url;
};

// // 删除信息
// const handleDeleteItem = async (params: any) => {
//   await useHandleData(deleteFlexjobApi, { id: params.id! }, `确认删除岗位：【${params.title}】`);
//   pTable.value.getTableList();
// };

// 打开 dialog(新增、查看、编辑)
const dialogRef = ref();
const handleOpenDialog = (optType: OptEnum, rowData?: { id: string }) => {
  let params = {
    optType: optType,
    rowData: { ...rowData }
  };
  // console.log("开票弹窗", params);
  dialogRef.value.acceptParams(params);
};
</script>
<style scoped lang="scss">
@import "./index.scss";
</style>
